<template>
  <div class="home-selection">
    <Nav />
    <!-- banner -->
    <div class="home-selection-banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="item in banner"
          :key="item.id"
          class="home-banner-box"
        >
          <a target="_blank" :href="item.jumpUrl"
            ><img :src="item.pic" width="350" height="140"
          /></a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 最新活动-->
    <div class="home-selection-active">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="(item, i) in action"
          :key="i"
          class="home-action-box"
          :height="80"
        >
          <a target="_blank" :href="item.jumpUrl"
            ><img :src="item.bannerImgUrl" width="350" height="84"
          /></a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 图标导航 -->
    <div class="home-selection-navig">
      <van-grid
        :border="false"
        :center="true"
        :column-num="5"
        icon-size=".5rem"
      >
        <van-grid-item
          v-for="(item, i) in snap"
          :icon="item.address"
          :text="item.name"
          :key="i"
          :url="url[i]"
        />
      </van-grid>
      <div class="home-selection-navig-fav">
        <div class="home-selection-navig-fav-icon">
          <img :src="favLogo" alt="" />
        </div>
        <van-swipe
          :autoplay="3000"
          lazy-render
          class="home-selection-navig-swipe"
          :show-indicators="false"
          :touchable="false"
          :height="40"
          :vertical="true"
        >
          <van-swipe-item
            v-for="(item, i) in fav"
            :key="i"
            class="home-fav-swipe-box"
          >
            <a target="_blank" :href="item.jumpUrl" class="home-fav-link"
              ><span class="home-fav-swipe-tag">{{ item.tag }}</span
              ><span class="home-fav-swipe-name">{{ item.name }}</span
              ><van-icon name="arrow"
            /></a>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 抢购 -->
    <div class="home-selection-ddq">
      <div class="home-selection-ddq-title">
        <div class="home-selection-ddq-title-text">
          咚咚抢<span>整点特惠开抢</span>
        </div>
        <div class="home-selection-ddq-title-pople"></div>
      </div>
      <div class="home-selection-ddq-time">
        <div class="home-selection-ddq-time-box">
          <div
            class="home-selection-ddq-session"
            v-for="(item, i) in ddq"
            :key="i"
            :class="classActive == i ? 'active' : ''"
            @click="setactive(i, $event)"
          >
            <p>{{ item.timeDesc }}</p>
            <p v-if="item.status == -1">已开抢</p>
            <p v-if="item.status == 0">正在疯抢</p>
            <p v-if="item.status == 1">即将开始</p>
          </div>
        </div>
      </div>
      <div class="home-selection-ddq-rob">
        <div class="home-selection-ddq-rob-box">
          <div
            class="home-selection-ddq-shop"
            v-for="(item, i) in ddq"
            :key="i"
          >
            <div v-if="i == classActive">
              <div
                class="home-selection-ddq-shop-list"
                v-for="shop in item.ddqGoodsList"
                :key="shop.id"
              >
                <img
                  :src="shop.pic"
                  alt=""
                  class="home-selection-ddq-shop-pic"
                />
                <span
                  class="home-selection-ddq-shop-title-fixed"
                  v-if="shop.newWords"
                  >{{ shop.newWords }}</span
                >
                <p class="home-selection-ddq-shop-price">
                  <span class="home-selection-ddq-new-price">{{
                    shop.price
                  }}</span
                  ><span class="home-selection-ddq-old-price">{{
                    shop.orginPrice
                  }}</span>
                </p>
                <p class="home-selection-ddq-shop-sale-num">
                  已抢{{ parseInt(shop.salesNum / 10000) }}万
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 特卖 -->
    <div class="home-selection-sale">
      <div class="home-selection-sale-title">
        <div class="home-selection-sale-title-text">
          <div class="home-selection-sale-title-text-big">品牌特卖</div>
          <div class="home-selection-sale-title-text-small">
            今日上新{{ sale.newGoodsCountOfToday }}款
          </div>
        </div>
        <div class="home-selection-sale-title-adv">
          <van-swipe
            class="my-swipe"
            :touchable="false"
            :autoplay="3000"
            indicator-color="white"
            :vertical="true"
            :show-indicators="false"
          >
            <van-swipe-item
              v-for="(item, i) in sale.reports"
              :height="30"
              :key="i"
              ><a class="home-selection-sale-adv-text"
                >{{ item.label }}<van-icon name="arrow" /></a
            ></van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="home-selection-sale-store">
        <van-swipe class="my-swipe" :autoplay="30000" indicator-color="red">
          <van-swipe-item v-for="(item, i) in sale.brandDTOS" :key="i">
            <div
              class="home-selection-sale-store-title"
              :style="{
                backgroundImage: 'url(' + item.backgroundImg + ')',
                backgroundSize: '100% 1.05rem',
              }"
            >
              <div class="home-selection-sale-store-title-brand">
                <div class="home-selection-brand-logo-box">
                  <img
                    :src="item.brandLogo"
                    alt=""
                    class="home-selection-brand-logo"
                  />
                </div>
                <span class="home-selection-brand-name">{{
                  item.brandName
                }}</span>
              </div>
              <span class="home-selection-sale-time">
                仅剩:
                {{
                  Math.floor(
                    (item.endNumTime - new Date().getTime()) /
                      (24 * 60 * 60 * 1000)
                  ) + 1
                }}天
              </span>
              <span class="home-selection-sale-brand-sale">{{
                item.longProfit
              }}</span>
              <a href="item." class="home-selection-sale-brand-num"
                >已售{{ (item.recentSale / 10000).toFixed(1) }}万件<van-icon
                  name="arrow"
              /></a>
              <span class="home-selection-sale-bran-fans"
                >{{ (item.fansNum / 10000).toFixed(1) }}w人关注</span
              >
            </div>
            <div class="home-selection-sale-store-shop">
              <div
                class="home-selection-bran-shop-box"
                v-for="(shop, i) in item.hotPush"
                :key="i"
              >
                <img
                  :src="shop.pic"
                  alt=""
                  class="home-selection-bran-shop-pic"
                />
                <span class="home-selection-bran-shop-discount"
                  >{{ shop.discount }}折</span
                >
                <span class="home-selection-bran-shop-tick"
                  ><span class="home-selection-quan">券</span>
                  {{ shop.quanJine }}元</span
                >
                <span class="home-selection-bran-shop-price"
                  ><span class="home-selection-bran-shop-new-price"
                    >¥ {{ shop.jiage }}</span
                  ><span class="home-selection-bran-shop-old-price"
                    >¥{{ shop.yuanjia }}</span
                  ></span
                >
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 大家都在领 -->
    <div class="home-selection-coupon">
      <div class="home-selection-coupon-title">
        <div class="home-selection-coupon-title-text">大家都在领</div>
        <div class="home-selection-coupon-title-number">
          {{ coupon.total_quan_over.now_num.toLocaleString()
          }}<span>今日实时领券</span>
        </div>
      </div>
      <div class="home-selection-coupon-shop">
        <div class="home-selection-coupon-shop-list">
          <div
            class="home-selection-coupon-shop-item"
            v-for="item in coupon.list"
            :key="item.id"
          >
            <img
              :src="item.pic"
              alt=""
              class="home-selection-coupon-shop-item-pic"
            />
            <span class="home-selection-coupon-shop-item-tag"
              >{{ item.couponPrice }}元券</span
            >
            <span class="home-selection-coupon-shop-item-price"
              >¥{{ item.price }}</span
            >
            <span class="home-selection-coupon-shop-item-num"
              >已领{{ (item.couponNum / 10000).toFixed(1) }}w张券</span
            >
            <span class="home-selection-coupon-shop-item-hint">火热领券中</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="home-selecton-classify">
      <div
        :class="
          !classActive
            ? 'active home-selection-class-find'
            : 'home-selection-class-find'
        "
        @click="setactive(0)"
      >
        <div class="home-selection-class-find-title">发现</div>
        <div class="home-selection-class-find-text">推荐好货</div>
      </div>
      <span></span>
      <div
        :class="
          classActive
            ? 'home-selection-class-good active'
            : 'home-selection-class-good'
        "
        @click="setactive(1)"
      >
        <div class="home-selection-class-good-title">精选</div>
        <div class="home-selection-class-good-text">猜你喜欢</div>
      </div>
    </div>
    <keep-alive>
      <Find v-if="!classActive" />
    </keep-alive>
    <keep-alive>
      <Good v-if="classActive" />
    </keep-alive>
  </div>
</template>
<script lang="ts">
import Nav from "./Nav.vue";
import Find from "./Find.vue";
import Good from "./Good.vue";
import { defineComponent, computed, onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import {
  IBanner,
  IAction,
  ISnap,
  ISale,
  ICoupon,
} from "./../../store/home/interface";
export default defineComponent({
  components: {
    Nav,
    Find,
    Good,
  },
  setup() {
    const store = useStore();
    const snap = computed((): ISnap[] => {
      return store.state.home.snap;
    });
    const url = [
      "../fqph",
      "../jkj",
      "../firstbrand",
      "../star",
      "../discount",
      "",
      "",
      "../monther",
      "../reel",
      "",
    ];
    const coupon = computed((): ICoupon[] => {
      return store.state.home.coupon;
    });
    const favLogo = computed((): ISnap[] => {
      return store.state.home.favLogo;
    });
    const sale = computed((): ISale[] => {
      return store.state.home.sale;
    });
    const fav = computed((): ISnap[] => {
      return store.state.home.fav;
    });
    const banner = computed((): IBanner => {
      return store.state.home.banner;
    });
    const action = computed((): IAction => {
      return store.state.home.action;
    });
    const ddq = computed(() => {
      store.state.home.ddq.forEach((item: any, i: number) => {
        if (item.status == 0) {
          start.classActive = i;
        }
      });
      return store.state.home.ddq;
    });
    const start = reactive({
      classActive: 0,
    });
    onMounted(() => {
      store.dispatch({
        type: "home/getbanner",
      });
      store.dispatch({
        type: "home/getaction",
      });
      store.dispatch({
        type: "home/getsnap",
      });
      store.dispatch({
        type: "home/getfav",
      });
      store.dispatch({
        type: "home/getddq",
      });
      store.dispatch({
        type: "home/getsale",
      });
      store.dispatch({
        type: "home/getcoupon",
      });
    });
    const setactive = (n: number): void => {
      start.classActive = n;
    };
    return {
      banner,
      action,
      snap,
      fav,
      favLogo,
      ddq,
      sale,
      coupon,
      ...toRefs(start),
      setactive,
      url,
    };
  },
});
</script>
<style lang="stylus" scoped>
.home-banner-box
  display flex
  justify-content center
  margin-top .1rem
.home-action-box
  display flex
  justify-content center
.home-selection-navig
  margin .1rem
  border-radius 10px
  overflow hidden
  .home-selection-navig-fav
    background #fff
    display flex
    justify-content center
    .home-selection-navig-fav-icon
      width .58rem
      height .4rem
      display flex
      align-items center
      img
        width .5rem
        margin-left .08rem
    /deep/ .home-selection-navig-swipe
      flex 1
      height .4rem
      .home-fav-swipe-box
        display flex
        align-items center
      .home-fav-link
        font-size .1rem
        display flex
        flex 1
        justify-content center
        color #333
        align-items center
        line-height .14rem
        .home-fav-swipe-tag
          color #fff
          background linear-gradient(90deg,#ff9676 0,#ff7913 100%)
          display block
          height .14rem
          margin 0 .05rem
          padding 0 .04rem
          border-radius 7px
        .home-fav-swipe-name
          flex 1
        i
          margin-right .1rem
.home-selection-ddq
  background #fff
  width 3.5rem
  margin auto
  border-radius 4px
  box-sizing border-box
  padding .1rem
  .home-selection-ddq-title
    display flex
    justify-content flex-start
    .home-selection-ddq-title-text
      font-size .15rem
      height .4rem
      span
        font-size .1rem
        color #666
        margin-left .1rem
  .home-selection-ddq-time
    overflow auto
    height .4rem
    &::-webkit-scrollbar{
      display none
    }
    .home-selection-ddq-time-box
      width 7.3rem
      overflow hidden
      height 100%
      .home-selection-ddq-session
        font-size .13rem
        line-height .18rem
        float left
        display flex
        width .8rem
        height .4rem
        border-radius .2rem
        box-sizing border-box
        align-items center
        flex-direction column
        background #f8f8f8
        margin 0 .05rem
        padding .03rem .1rem
        position relative
        &.active
          background linear-gradient(270deg,#fe3c35 0,#ff5072 100%)
          p
            color #fff
        p
          margin 0
.home-selection-ddq-rob
  width 100%
  overflow auto
  padding-top .1rem
  &::-webkit-scrollbar{
    display none
  }
  .home-selection-ddq-rob-box
    overflow hidden
    width 10.8rem
    .home-selection-ddq-shop-list
      float left
      margin  0 .1rem
      position relative
      display flex
      flex-direction column
      .home-selection-ddq-shop-pic
        width 1rem
      .home-selection-ddq-shop-title-fixed
        position absolute
        top .84rem
        font-size .1rem
        z-index 4
        left .12rem
        color #f60
        background #fff
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        padding 0 .1rem
        line-height .14rem
        border-radius .07rem
      .home-selection-ddq-shop-price
        margin 0
        padding 0
        height .16rem
        display flex
        align-items flex-end
        justify-content center
        text-align center
        padding-top .05rem
        .home-selection-ddq-new-price
          color #fe3738
          font-size .16rem
          line-height .16rem
        .home-selection-ddq-old-price
          color #999
          text-decoration line-through
          margin-left .05rem
          font-size .12rem
          line-height .12rem
      .home-selection-ddq-shop-sale-num
        font-size .11rem
        color #fe3d3a
        text-align center
        margin .03rem 0
.home-selection-sale
  width 3.5rem
  margin auto
  background #fff
  border-radius 4px
  box-sizing border-box
  margin-top .2rem
  padding .04rem .1rem
  .home-selection-sale-title
    display flex
    justify-content center
    padding .1rem 0
    .home-selection-sale-title-text
      display flex
      justify-content center
      line-height .3rem
      .home-selection-sale-title-text-big
        font-size .16rem
        color #333
      .home-selection-sale-title-text-small
        font-size .12rem
        margin-left 4px
        color #999
    .home-selection-sale-title-adv
      flex 1
      height .3rem
      display flex
      justify-content flex-end
      .van-swipe-item
        display flex
        align-items center
        justify-content flex-end
        .home-selection-sale-adv-text
          color #fe3738
          font-size .1rem
          text-align right
  .home-selection-sale-store
    display flex
    position relative
    width 100%
    .home-selection-sale-store-title-brand
      display flex
      justify-content flex-start
      align-items center
      height .4rem
      margin-left .1rem
      padding-top .06rem
      .home-selection-brand-logo-box
        width .3rem
        height .3rem
        background #fff
        display flex
        align-items center
        justify-content center
        border-radius 5px
        .home-selection-brand-logo
          width .3rem
      .home-selection-brand-name
        color #fff
        font-size .16rem
        line-height .3rem
        margin-left .08rem
    .home-selection-sale-time
      position absolute
      top .06rem
      right .03rem
      font-size .1rem
    .home-selection-sale-brand-sale
      color #fff
      font-size .14rem
      display flex
      margin-left .1rem
      margin-top .1rem
    .home-selection-sale-brand-num
      color #fff
      font-size .1rem
      display flex
      margin-left .1rem
      margin-top .03rem
    .home-selection-sale-bran-fans
      position absolute
      bottom 0
      right 0
      background linear-gradient(276deg,#ff1e2f 0,#e51698 100%)
      padding .04rem
      border-radius .08rem
      font-size .1rem
      color #fff
.home-selection-sale-store-title
  border-radius .1rem
  display flex
  width 3.3rem
  height 1.05rem
  position relative
  flex-direction column
.home-selection-sale-store-shop
  display flex
  justify-content flex-start
  width 3.4rem
  overflow hidden
  .home-selection-bran-shop-box
    margin .05rem
    display flex
    justify-content center
    flex-direction column
    position relative
    .home-selection-bran-shop-pic
      width 1rem
    .home-selection-bran-shop-discount
      font-size .1rem
      color #fff
      width .4rem
      text-align center
      border-radius .06rem
      line-height .14rem
      background linear-gradient(153deg,#fad9610,#f76b1c 100%)
      position absolute
      top .8rem
      right 0
    .home-selection-bran-shop-tick
      background red
      font-size .1rem
      color #fff
      height .14rem
      line-height .14rem
      padding-right .05rem
      border-radius .02rem
      align-self flex-start
      .home-selection-quan
        background #fff
        color red
    .home-selection-bran-shop-price
      display flex
      margin-top .04rem
      margin-bottom .3rem
      align-items flex-end
      .home-selection-bran-shop-new-price
        font-size .14rem
        color #fe3738
      .home-selection-bran-shop-old-price
        font-size .11rem
        color #999
        margin-left .02rem
        text-decoration line-through
.home-selection-coupon
  background #fff
  width 3.5rem
  margin .1rem auto
  border-radius 4px
  box-sizing border-box
  padding 0 .1rem
  .home-selection-coupon-title
    height .4rem
    display flex
    justify-content center
    align-items center
    .home-selection-coupon-title-text
      font-size .15rem
      line-height .2rem
      flex 1
      text-align left
    .home-selection-coupon-title-number
      color #f9635d
      font-size .14rem
      line-height .2rem
      display flex
      span
        font-size .12rem
        margin-left .04rem
        color #333
  .home-selection-coupon-shop
    overflow auto
    &::-webkit-scrollbar{
          display none
    }
    .home-selection-coupon-shop-list
      overflow hidden
      width 13.2rem
      .home-selection-coupon-shop-item
        float left
        margin 0 .05rem .2rem
        position relative
        display flex
        flex-direction column
        .home-selection-coupon-shop-item-pic
          width 1rem
          height 1rem
        .home-selection-coupon-shop-item-tag
          color #d55400
          background #fff2e7
          font-size .1rem
          line-height .14rem
          padding 0 .04rem
          border-radius 2px
          position absolute
          top .86rem
          right 0
        .home-selection-coupon-shop-item-price
          color red
          font-size .16rem
          line-height .24rem
        .home-selection-coupon-shop-item-num
          color red
          font-size .12rem
          text-align left
        .home-selection-coupon-shop-item-hint
          color #999
          font-size .12rem
          line-height .16rem
.home-selecton-classify
  display flex
  justify-content center
  align-items center
  position sticky
  top .3rem
  background #ff7c0d
  padding .1rem 0
  span
    background #fff
    padding .08rem .01rem
  .home-selection-class-find
    flex 1
    display flex
    flex-direction column
    justify-content center
    text-align center
    .home-selection-class-find-title
      font-size .18rem
      color #fff
    .home-selection-class-find-text
      font-size .12rem
      color #fff
      width .6rem
      margin 0 auto
    &.active
      .home-selection-class-find-text
        color #FE3837
        background #fff
        border-radius .1rem
  .home-selection-class-good
    flex 1
    display flex
    justify-content center
    text-align center
    flex-direction column
    .home-selection-class-good-title
      color #fff
      font-size .18rem
    .home-selection-class-good-text
      font-size .12rem
      color #fff
      width .6rem
      margin 0 auto
    &.active
      .home-selection-class-good-text
        color #FE3837
        background #fff
        border-radius .1rem
</style>
